<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { Collapse } from 'vue-collapse'

const route = useRoute()
const isOpen = ref(false)

const navLinks = [
  { name: '首页', path: '/', icon: 'home' },
  { 
    name: '相册', 
    path: '/albums',
    children: [
      { name: '人物', path: '/faces', icon: 'user-group' },
      { name: '时间轴', path: '/timeline', icon: 'timeline' }
    ]
  },
  { name: '上传', path: '/upload', icon: 'cloud-upload' }
]

const closeMenu = () => {
  if (window.innerWidth < 768) {
    isOpen.value = false
  }
}
</script>

<template>
  <nav class="bg-white shadow-lg fixed w-full z-50">
    <div class="max-w-7xl mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <!-- 桌面端导航 -->
        <div class="hidden md:flex space-x-8">
          <router-link
            v-for="(link, index) in navLinks"
            :key="index"
            :to="link.path"
            class="flex items-center px-3 py-2 rounded-md transition-colors"
            :class="{
              'bg-blue-100 text-blue-600': route.path === link.path,
              'text-gray-700 hover:bg-gray-100': route.path !== link.path
            }"
          >
            <FontAwesomeIcon :icon="link.icon" class="mr-2" />
            {{ link.name }}
          </router-link>
        </div>

        <!-- 移动端汉堡菜单 -->
        <div class="md:hidden">
          <button
            @click="isOpen = !isOpen"
            class="p-2 rounded-md text-gray-600 hover:bg-gray-100"
          >
            <FontAwesomeIcon icon="bars" class="w-6 h-6" />
          </button>
        </div>
      </div>
    </div>

    <!-- 移动端下拉菜单 -->
    <Collapse :show="isOpen">
      <div class="md:hidden bg-white border-t">
        <router-link
          v-for="(link, index) in navLinks"
          :key="index"
          :to="link.path"
          class="block px-4 py-3 text-gray-700 hover:bg-gray-100"
          @click.native="closeMenu"
        >
          {{ link.name }}
        </router-link>
      </div>
    </Collapse>
  </nav>
</template>

<style scoped>
.router-link-active {
  @apply font-semibold;
}

.vue-collapse {
  transition: all 0.3s ease-in-out;
}
</style>
